<!--  -->
<template>
  <div class="content">
    <div class="table-TopMax">
      <div class="table-TOP">
        <div class="table-TOPcenter">
          <i class="el-icon-location-information"></i>
          <span>A区日光灯</span>
        </div>
        <span style="line-height: 50px"> KVT模式 </span>
        <div class="table-TOPcenter2">
          <span>设备数:</span>
          <span>8</span>
        </div>
        <div class="table-TOPcenter" style="width: 30%">
          <span>照明渐变（s）:</span>
          <span>5s</span>
        </div>
      </div>
      <div style="margin-right: 60px">
        <el-button
          style="color: #000"
          type="text"
          @click="fanhui()"
          icon="el-icon-back"
          >返回</el-button
        >
      </div>
    </div>
    <el-table
      :data="tableData"
      stripe
      v-loading="loading"
      style="width: 100%; font-size: 14px"
      max-height="700"
      :header-cell-style="{
        'text-align': 'center',
        background: '#f5f7fa',
        color: '#000',
      }"
      :cell-style="{ 'text-align': 'center' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column prop="id" label="序号" width="50"></el-table-column>
      <el-table-column prop="date" width="180">
        <template slot="header">
          所在空间 &nbsp;<i class="el-icon-caret-bottom"></i>
        </template>

        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="name" align="center">
        <template slot="header">
          名称 &nbsp;<i class="el-icon-caret-bottom"></i>
        </template>
      </el-table-column>

      <el-table-column prop="name" align="center">
        <template slot="header">
          设备类型 &nbsp;<i class="el-icon-caret-bottom"></i>
        </template>
        <template slot-scope="scope">
          <span align="center" v-if="show">{{ scope.row.name || "--" }} </span>
          <el-input
            v-model="scope.row.name"
            type="text"
            placeholder="输入设备名称"
            v-else
          />
        </template>
      </el-table-column>

      <el-table-column prop="address2" label="操作" align="center">
        <template slot-scope="scope">
          <el-select v-model="scope.row.address">
            <el-option
              v-for="item in SetRgb"
              :value="item.name"
              :label="item.name"
              :key="item.id"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>

      <el-table-column label="" align="center">
        <template slot="header">
          <el-button size="small" type="primary" @click="remove(scope.row.id)"
            >保存设置</el-button
          >&nbsp;
        </template>

        <template slot-scope="">
          <el-switch
            v-model="switchValue"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      switchValue: false,
      show: true,
      SetRgb: [
        {
          name: "RGBW 255, 189,222",
          id: 1,
        },
      ],
      tableData: [
        {
          id: "001",
          date: "C8AD42596D1D",
          name: "导轨式风机盘管",
          address: "陈总办公室筒灯",
          address2: "S001",
        },
        {
          id: "002",
          date: "C8AD42596D1D",
          name: "导轨式风机盘管",
          address: "陈总办公室筒灯",
          address2: "S001",
        },
        {
          id: "003",
          date: "C8AD42596D1D",
          name: "导轨式风机盘管",
          address: "陈总办公室筒灯",
          address2: "S001",
        },
        {
          id: "004",
          date: "C8AD42596D1D",
          name: "导轨式风机盘管",
          address: "陈总办公室筒灯",
          address2: "S001",
        },
        {
          id: "005",
          date: "C8AD42596D1D",
          name: "导轨式风机盘管",
          address: "陈总办公室筒灯",
          address2: "S001",
        },
        {
          id: "006",
          date: "C8AD42596D1D",
          name: "导轨式风机盘管",
          address: "陈总办公室筒灯",
          address2: "S001",
        },
        {
          id: "007",
          date: "C8AD42506D1D",
          name: "导轨式风机盘管",
          address: "陈总办公室筒灯",
          address2: "S001",
        },
        {
          id: "008",
          date: "C8AD42506D1D",
          name: "导轨式风机盘管",
          address: "陈总办公室筒灯",
          address2: "S001",
        },
      ],
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    handleSelectionChange() {},
  },
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.content {
  width: calc(100vw - 345px);
  height: calc(100vh - 80px);
  margin: 0 50px;

  .table-TopMax {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;

    border-bottom: 1px solid rgb(219, 217, 215);

    .table-TOP {
      width: 40%;
      display: flex;
      justify-content: space-between;

      .table-TOPcenter {
        width: 22%;
        display: flex;
        align-items: center;

        span {
          width: 50%;
        }

        span:nth-child(2) {
          text-align: left;
          color: rgb(219, 217, 215);
        }
      }

      .table-TOPcenter2 {
        width: 16%;
        display: flex;
        align-items: center;

        span {
          width: 50%;
          color: rgb(219, 217, 215);
        }

        span:nth-child(2) {
          text-align: left;
        }
      }
    }
  }
}

::v-deep .el-icon-back {
  text-align: center;
  line-height: 50px;
}
</style>
